<template>
  <view class="wrap">
    <u-row gutter="20">
      <u-col span="6" v-for="(item, index) in list" :key="index">
        <view
          class="goods_box"
          @click="$utils.toUrl('/goods/goods/goods?id=' + item.id)"
        >
          <view
            class="cover"
            :style="{ backgroundImage: `url(${item.cover_pic})` }"
          ></view>
          <view class="info">
            <view class="title">{{ item.name }}</view>
            <view class="flex-x-sb flex-y-center">
              <text class="cash"
                ><text style="font-size: 24rpx">￥</text>{{ item.price }}</text
              >
              <image
                v-if="isEdit"
                class="del"
                :src="
                  item.isChecked
                    ? asyncImgs.history.checked
                    : asyncImgs.history.unchecked
                "
                mode=""
                style="width: 30rpx; height: 30rpx"
                @click="item.isChecked = !item.isChecked"
              ></image>
              <u-icon
                v-else
                name="trash"
                class="del"
                @click.stop="remove(item.log_id, index)"
                >></u-icon
              >
            </view>
          </view>
        </view>
      </u-col>
      <u-col span="12" v-if="list.length == 0">
        <u-empty :text="$t('common.noRecord')" mode="history"></u-empty>
      </u-col>
    </u-row>
  </view>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  onLoad() {},
  created() {},
  onReachBottom() {},
  methods: {
    async remove(id, index) {
      this.$emit("remove", id, index);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: rgb(246, 246, 246);
  min-height: 900rpx;
  padding: 20rpx;

  .goods_box {
    border-radius: 15rpx;
    margin-bottom: 40rpx;

    .cover {
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;
      height: 350rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .info {
      background-color: #fff;
      border-bottom-left-radius: 15rpx;
      border-bottom-right-radius: 15rpx;
      padding: 10rpx;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 20rpx;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .cash {
        font-size: 36rpx;
        font-weight: bold;
        color: #f2270c;
      }

      .del {
        float: right;
        font-size: 28rpx;
        color: #b2b2b2;
        transform: translateY(10rpx);
      }
    }
  }
}
</style>
